//  * =========================================================== *
//  <                            lessAnimate                      >
//  * =========================================================== *
//
// marchen made with love
// branch from : https://github.com/w3cmark/css3
// case show : http://animate.oschina.mopaas.com/

// TABLE OF MIXINS:

.keyframes(@name) {
    @-webkit-keyframes @name {
        .-frames(-webkit-)
    }
    @-moz-keyframes @name {
        .-frames(-moz-)
    }
    @-o-keyframes @name {
        .-frames(-o-)
    }
    @-ms-keyframes @name {
        .-frames(-ms-)
    }
    @keyframes @name {
        .-frames()
    }
}

//animation lib
.bounce(@t:4px;@n:bounce){
    .keyframes(@n);
    .-frames(@-...){
    0%, 20%, 53%, 80%, 100% {
        @{-}transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    @{-}transform: translate3d(0, 0, 0);
    }
    40%, 43% {
        @{-}transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    @{-}transform: translate3d(0, -@t*8, 0);
    }
    70% {
        @{-}transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    @{-}transform: translate3d(0, -@t*4, 0);
    }
    90% {
        @{-}transform: translate3d(0, -@t, 0);
    }
}
}
.flash(){
    .keyframes(flash);
    .-frames(@-...){
    0%, 50%, 100% {
        .opacity(100);
    }
    25%, 75% {
        .opacity(0);
    }
}
}
.pulse(@t:1.05;@n:pulse){
    .keyframes(@n);
    .-frames(@-...){
    0% {
        @{-}transform: scale3d(1, 1, 1);
    }
    50% {
        @{-}transform: scale3d(@t, @t, @t);
    }
    100% {
        @{-}transform: scale3d(1, 1, 1);
    }
}
}

.rubberBand(){
    .keyframes(rubberBand);
    .-frames(@-...){
    0% {
        @{-}transform: scale3d(1, 1, 1);
    }

    30% {
        @{-}transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        @{-}transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        @{-}transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        @{-}transform: scale3d(.95, 1.05, 1);
    }

    75% {
        @{-}transform: scale3d(1.05, .95, 1);
    }

    100% {
        @{-}transform: scale3d(1, 1, 1);
    }
}
}
.shake(@x:10px;@n:shake){
    .keyframes(@n);
    .-frames(@-...){
    0%, 100% {
        @{-}transform: translate3d(0, 0, 0);
    }

    10%, 30%, 50%, 70%, 90% {
        @{-}transform: translate3d(-@x, 0, 0);
    }

    20%, 40%, 60%, 80% {
        @{-}transform: translate3d(@x, 0, 0);
    }
}
}
.swing(@d:5deg;@n:swing){
    .keyframes(@n);
    .-frames(@-...){
    20% {
        @{-}transform: rotate3d(0, 0, 1, @d*3);
    }

    40% {
        @{-}transform: rotate3d(0, 0, 1, -@d*2);
    }

    60% {
        @{-}transform: rotate3d(0, 0, 1, @d);
    }

    80% {
        @{-}transform: rotate3d(0, 0, 1, -@d);
    }

    100% {
        @{-}transform: rotate3d(0, 0, 1, 0deg);
    }
}
}
.tada(){
    .keyframes(tada);
    .-frames(@-...){
    0% {
        @{-}transform: scale3d(1, 1, 1);
    }

    10%, 20% {
        @{-}transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    }

    30%, 50%, 70%, 90% {
        @{-}transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }

    40%, 60%, 80% {
        @{-}transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }

    100% {
        @{-}transform: scale3d(1, 1, 1);
    }
}
}
.wobble(@d:1deg;@n:wobble){
    .keyframes(@n);
    .-frames(@-...){
    0% {
        @{-}transform: none;
    }

    15% {
        @{-}transform: translate(-25%, 0) rotate3d(0, 0, 1, -@d*5);
    }

    30% {
        @{-}transform: translate(20%, 0) rotate3d(0, 0, 1, @d*3);
    }

    45% {
        @{-}transform: translate(-15%, 0) rotate3d(0, 0, 1, -@d*3);
    }

    60% {
        @{-}transform: translate(10%, 0) rotate3d(0, 0, 1, @d*2);
    }

    75% {
        @{-}transform: translate(-5%, 0) rotate3d(0, 0, 1, -@d);
    }

    100% {
        @{-}transform: none;
    }
}
}

.wobbleTop(@d:1deg;@n:wobbleTop){
    .keyframes(@n);
    .-frames(@-...){
    0%{
        @{-}transform: skew(0);
    @{-}transform-origin:bottom;
    }
    16.65% {
        @{-}transform: skew(-12deg);
    @{-}transform-origin:bottom;
    }

    33.3% {
        @{-}transform: skew(10deg);
    @{-}transform-origin:bottom;
    }

    49.95% {
        @{-}transform: skew(-6deg);
    @{-}transform-origin:bottom;
    }

    66.6% {
        @{-}transform: skew(4deg);
    @{-}transform-origin:bottom;
    }

    83.25% {
        @{-}transform: skew(-2deg);
    @{-}transform-origin:bottom;
    }

    100% {
        @{-}transform: skew(0);
    @{-}transform-origin:bottom;
    }
}
}
.wobbleBottom(@d:1deg;@n:wobbleBottom){
    .keyframes(@n);
    .-frames(@-...){
    0%{
        @{-}transform: skew(0);
    @{-}transform-origin:top;
    }
    16.65% {
        @{-}transform: skew(-12deg);
    @{-}transform-origin:top;
    }

    33.3% {
        @{-}transform: skew(10deg);
    @{-}transform-origin:top;
    }

    49.95% {
        @{-}transform: skew(-6deg);
    @{-}transform-origin:top;
    }

    66.6% {
        @{-}transform: skew(4deg);
    @{-}transform-origin:top;
    }

    83.25% {
        @{-}transform: skew(-2deg);
    @{-}transform-origin:top;
    }

    100% {
        @{-}transform: skew(0);
    @{-}transform-origin:top;
    }
}
}
.wobbleSkew(@d:1deg;@n:wobbleSkew){
    .keyframes(@n);
    .-frames(@-...){
    16.65% {
        @{-}transform: skew(-12deg);
    }

    33.3% {
        @{-}transform: skew(10deg);
    }

    49.95% {
        @{-}transform: skew(-6deg);
    }

    66.6% {
        @{-}transform: skew(4deg);
    }

    83.25% {
        @{-}transform: skew(-2deg);
    }

    100% {
        @{-}transform: skew(0);
    }
}
}


.bounceIn(){
    .keyframes(bounceIn);
    .-frames(@-...){
    0%, 20%, 40%, 60%, 80%, 100% {
        @{-}transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        .opacity(0);
        @{-}transform: scale3d(.3, .3, .3);
    }

    20% {
        @{-}transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        @{-}transform: scale3d(.9, .9, .9);
    }

    60% {
        .opacity(100);
        @{-}transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        @{-}transform: scale3d(.97, .97, .97);
    }

    100% {
        .opacity(100);
        @{-}transform: scale3d(1, 1, 1);
    }
}
}
.bounceInDown(){
    .keyframes(bounceInDown);
    .-frames(@-...){
    0%, 60%, 75%, 90%, 100% {
        @{-}transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        .opacity(0);
        @{-}transform: translate3d(0, -3000px, 0);
    }

    60% {
        .opacity(100);
        @{-}transform: translate3d(0, 25px, 0);
    }

    75% {
        @{-}transform: translate3d(0, -10px, 0);
    }

    90% {
        @{-}transform: translate3d(0, 5px, 0);
    }

    100% {
        @{-}transform: none;
    }
}
}
.bounceInLeft(){
    .keyframes(bounceInLeft);
    .-frames(@-...){
    0%, 60%, 75%, 90%, 100% {
        @{-}transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        .opacity(0);
        @{-}transform: translate3d(-3000px, 0, 0);
    }

    60% {
        .opacity(100);
        @{-}transform: translate3d(25px, 0, 0);
    }

    75% {
        @{-}transform: translate3d(-10px, 0, 0);
    }

    90% {
        @{-}transform: translate3d(5px, 0, 0);
    }

    100% {
        @{-}transform: none;
    }
}
}
.bounceInRight(){
    .keyframes(bounceInRight);
    .-frames(@-...){
    0%, 60%, 75%, 90%, 100% {
        @{-}transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        .opacity(0);
        @{-}transform: translate3d(3000px, 0, 0);
    }

    60% {
        .opacity(100);
        @{-}transform: translate3d(-25px, 0, 0);
    }

    75% {
        @{-}transform: translate3d(10px, 0, 0);
    }

    90% {
        @{-}transform: translate3d(-5px, 0, 0);
    }

    100% {
        @{-}transform: none;
    }
}
}
.bounceInUp(){
    .keyframes(bounceInUp);
    .-frames(@-...){
    0%, 60%, 75%, 90%, 100% {
        @{-}transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        .opacity(0);
        @{-}transform: translate3d(0, 3000px, 0);
    }

    60% {
        .opacity(100);
        @{-}transform: translate3d(0, -20px, 0);
    }

    75% {
        @{-}transform: translate3d(0, 10px, 0);
    }

    90% {
        @{-}transform: translate3d(0, -5px, 0);
    }

    100% {
        @{-}transform: translate3d(0, 0, 0);
    }
}
}
.bounceOut(){
    .keyframes(bounceOut);
    .-frames(@-...){
    20% {
        @{-}transform: scale3d(.9, .9, .9);
    }

    50%, 55% {
        .opacity(100);
        @{-}transform: scale3d(1.1, 1.1, 1.1);
    }

    100% {
        .opacity(0);
        @{-}transform: scale3d(.3, .3, .3);
    }
}
}
.bounceOutDown(){
    .keyframes(bounceOutDown);
    .-frames(@-...){
    20% {
        @{-}transform: translate3d(0, 10px, 0);
    }

    40%, 45% {
        .opacity(100);
        @{-}transform: translate3d(0, -20px, 0);
    }

    100% {
        .opacity(0);
        @{-}transform: translate3d(0, 2000px, 0);
    }
}
}
.bounceOutLeft(){
    .keyframes(bounceOutLeft);
    .-frames(@-...){
    20% {
        .opacity(100);
        @{-}transform: translate3d(20px, 0, 0);
    }

    100% {
        .opacity(0);
        @{-}transform: translate3d(-2000px, 0, 0);
    }
}
}
.bounceOutRight(){
    .keyframes(bounceOutRight);
    .-frames(@-...){
    20% {
        .opacity(100);
        @{-}transform: translate3d(-20px, 0, 0);
    }

    100% {
        .opacity(0);
        @{-}transform: translate3d(2000px, 0, 0);
    }
}
}
.bounceOutUp(){
    .keyframes(bounceOutUp);
    .-frames(@-...){
    20% {
        @{-}transform: translate3d(0, -10px, 0);
    }

    40%, 45% {
        .opacity(100);
        @{-}transform: translate3d(0, 20px, 0);
    }

    100% {
        .opacity(0);
        @{-}transform: translate3d(0, -2000px, 0);
    }
}
}
.fadeIn(@x: 0;@y: 0;@n: fadeIn){
    .keyframes(@n);
    .-frames(@-...){
    0% {
        .opacity(0);
        @{-}transform: translate3d(@x, @y, 0);
    }
    100% {
        .opacity(100);
        @{-}transform: none;
    }
}
}
.fadeInDown(){
    .keyframes(fadeInDown);
    .-frames(@-...){
    0% {
        .opacity(0);
        @{-}transform: translate3d(0, -100%, 0);
    }
    100% {
        .opacity(100);
        @{-}transform: none;
    }
}
}
.fadeInDownBig(){
    .keyframes(fadeInDownBig);
    .-frames(@-...){
    0% {
        .opacity(0);
        @{-}transform: translate3d(0, -2000px, 0);
    }

    100% {
        .opacity(100);
        @{-}transform: none;
    }
}
}

.fadeInLeft(){
    .keyframes(fadeInLeft);
    .-frames(@-...){
    0% {
        .opacity(0);
        @{-}transform: translate3d(-100%, 0, 0);
    }

    100% {
        .opacity(100);
        @{-}transform: none;
    }
}
}
.fadeInLeftBig(){
    .keyframes(fadeInLeftBig);
    .-frames(@-...){
    0% {
        .opacity(0);
        @{-}transform: translate3d(-2000px, 0, 0);
    }

    100% {
        .opacity(100);
        @{-}transform: none;
    }
}
}
.fadeInRight(){
    .keyframes(fadeInRight);
    .-frames(@-...){
    0% {
        .opacity(0);
        @{-}transform: translate(100%, 0,);
    }

    100% {
        .opacity(100);
        @{-}transform: none;
    }
}
}
.fadeInRightBig(){
    .keyframes(fadeInRightBig);
    .-frames(@-...){
    0% {
        .opacity(0);
        @{-}transform: translate3d(2000px, 0, 0);
    }

    100% {
        .opacity(100);
        @{-}transform: none;
    }
}
}
.fadeInUp(){
    .keyframes(fadeInUp);
    .-frames(@-...){
    0% {
        .opacity(0);
        @{-}transform: translate3d(0, 100%, 0);
    }

    100% {
        .opacity(100);
        @{-}transform: none;
    }
}
}
.fadeInUpBig(){
    .keyframes(fadeInUpBig);
    .-frames(@-...){
    0% {
        .opacity(0);
        @{-}transform: translate3d(0, 2000px , 0);
    }

    100% {
        .opacity(100);
        @{-}transform: none;
    }
}
}

.fadeOut(@x: 0;@y: 0;@n: fadeOut){
    .keyframes(@n);
    .-frames(@-...){
    0% {
        .opacity(100);
    }
    100% {
        .opacity(0);
        @{-}transform: translate3d(@x, @y, 0);
    }
}
}
.fadeOutDown(){
    .keyframes(fadeOutDown);
    .-frames(@-...){
    0% {
        .opacity(100);
    }
    100% {
        .opacity(0);
        @{-}transform: translate3d(0, 100%, 0);
    }
}
}
.fadeOutDownBig(){
    .keyframes(fadeOutDownBig);
    .-frames(@-...){
    0% {
        .opacity(100);
    }

    100% {
        .opacity(0);
        @{-}transform: translate3d(0, 2000px, 0);
    }
}
}
.fadeOutLeft(){
    .keyframes(fadeOutLeft);
    .-frames(@-...){
    0% {
        .opacity(100);
    }

    100% {
        .opacity(0);
        @{-}transform: translate3d(-100%, 0, 0);
    }
}
}
.fadeOutLeftBig(){
    .keyframes(fadeOutLeftBig);
    .-frames(@-...){
    0% {
        .opacity(100);
    }
    100% {
        .opacity(0);
        @{-}transform: translate3d(-2000px, 0, 0);
    }
}
}
.fadeOutRight(){
    .keyframes(fadeOutRight);
    .-frames(@-...){
    0% {
        .opacity(100);
    }
    100% {
        .opacity(0);
        @{-}transform: translate3d(100%, 0, 0);
    }
}
}
.fadeOutRightBig(){
    .keyframes(fadeOutRightBig);
    .-frames(@-...){
    0% {
        .opacity(100);
    }

    100% {
        .opacity(0);
        @{-}transform: translate3d(2000px, 0, 0);
    }
}
}
.fadeOutUp(){
    .keyframes(fadeOutUp);
    .-frames(@-...){
    0% {
        .opacity(100);
    }

    100% {
        .opacity(0);
        @{-}transform: translate3d(0, -100%, 0);
    }
}
}
.fadeOutUpBig(){
    .keyframes(fadeOutUpBig);
    .-frames(@-...){
    0% {
        .opacity(100);
    }

    100% {
        .opacity(0);
        @{-}transform: translate3d(0, -2000px, 0);
    }
}
}
.flip(){
    .keyframes(flip);
    .-frames(@-...){
    0% {
        @{-}transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    @{-}animation-timing-function: ease-out;
    }

    40% {
        @{-}transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    @{-}animation-timing-function: ease-out;
    }

    50% {
        @{-}transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    @{-}animation-timing-function: ease-in;
    }

    80% {
        @{-}transform: perspective(400px) scale3d(.95, .95, .95);
    @{-}animation-timing-function: ease-in;
    }

    100% {
        @{-}transform: perspective(400px);
    @{-}animation-timing-function: ease-in;
    }
}
}
.flipInX(){
    .keyframes(flipInX);
    .-frames(@-...){
    0% {
        @{-}transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    @{-}transition-timing-function: ease-in;
    .opacity(0);
    }

    40% {
        @{-}transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    @{-}transition-timing-function: ease-in;
    }

    60% {
        @{-}transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    .opacity(100);
    }

    80% {
        @{-}transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    100% {
        @{-}transform: perspective(400px);
    }
}
}
.flipInY(){
    .keyframes(flipInY);
    .-frames(@-...){
    0% {
        @{-}transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    @{-}transition-timing-function: ease-in;
    .opacity(0);
    }

    40% {
        @{-}transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    @{-}transition-timing-function: ease-in;
    }

    60% {
        @{-}transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    .opacity(100);
    }

    80% {
        @{-}transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }

    100% {
        @{-}transform: perspective(400px);
    }
}
}
.flipOutX(){
    .keyframes(flipOutX);
    .-frames(@-...){
    0% {
        @{-}transform: perspective(400px);
    }

    30% {
        @{-}transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    .opacity(100);
    }

    100% {
        @{-}transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    .opacity(0);
    }
}
}
.flipOutY(){
    .keyframes(flipOutY);
    .-frames(@-...){
    0% {
        @{-}transform: perspective(400px);
    }

    30% {
        @{-}transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    .opacity(100);
    }

    100% {
        @{-}transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    .opacity(0);
    }
}
}

//scale
.scaleIn(){
    .keyframes(scaleIn);
    .-frames(@-...){
    0% {
        @{-}transform: scale3d(0, 0, 1);
    }

    100% {
        @{-}transform: scale3d(1, 1, 1);
    }
}
}
.scaleInX(){
    .keyframes(scaleInX);
    .-frames(@-...){
    0% {
        @{-}transform: scale3d(0, 1, 1);
    }

    100% {
        @{-}transform: scale3d(1, 1, 1);
    }
}
}
.scaleInY(){
    .keyframes(scaleInY);
    .-frames(@-...){
    0% {
        @{-}transform: scale3d(1, 0, 1);
    }

    100% {
        @{-}transform: scale3d(1, 1, 1);
    }
}
}
.scaleOut(){
    .keyframes(scaleOut);
    .-frames(@-...){
    0% {
        @{-}transform: scale3d(1, 1, 1);
    }

    100% {
        @{-}transform: scale3d(0, 0, 1);
    }
}
}
.scaleOutX(){
    .keyframes(scaleOutX);
    .-frames(@-...){
    0% {
        @{-}transform: scale3d(1, 1, 1);
    }

    100% {
        @{-}transform: scale3d(0, 1, 1);
    }
}
}
.scaleOutY(){
    .keyframes(scaleOutY);
    .-frames(@-...){
    0% {
        @{-}transform: scale3d(1, 1, 1);
    }

    100% {
        @{-}transform: scale3d(1, 0, 1);
    }
}
}

.lightSpeedInLeft(){
    .keyframes(lightSpeedInLeft);
    .-frames(@-...){
    0% {
        @{-}transform: translate3d(-100%, 0, 0) skewX(30deg);
    .opacity(0);
    }

    60% {
        @{-}transform: skewX(-20deg);
    .opacity(100);
    }

    80% {
        @{-}transform: skewX(5deg);
    .opacity(100);
    }

    100% {
        @{-}transform: none;
    .opacity(100);
    }
}
}
.lightSpeedInRight(){
    .keyframes(lightSpeedInRight);
    .-frames(@-...){
    0% {
        @{-}transform: translate3d(100%, 0, 0) skewX(-30deg);
    .opacity(0);
    }

    60% {
        @{-}transform: skewX(20deg);
    .opacity(100);
    }

    80% {
        @{-}transform: skewX(-5deg);
    .opacity(100);
    }

    100% {
        @{-}transform: none;
    .opacity(100);
    }
}
}
.lightSpeedOutLeft(){
    .keyframes(lightSpeedOutLeft);
    .-frames(@-...){
    0% {
        .opacity(100);
    }
    100% {
        @{-}transform: translate(-100%, 0) skewX(-30deg);
    .opacity(0);
    }
}
}
.lightSpeedOutRight(){
    .keyframes(lightSpeedOutRight);
    .-frames(@-...){
    0% {
        .opacity(100);
    }
    100% {
        @{-}transform: translate(100%, 0) skewX(30deg);
    .opacity(0);
    }
}
}
.rotateIn(){
    .keyframes(rotateIn);
    .-frames(@-...){
    0% {
        @{-}transform-origin: center;
    @{-}transform: rotate3d(0, 0, 1, -200deg);
    .opacity(0);
    }

    100% {
        @{-}transform-origin: center;
    @{-}transform: none;
    .opacity(100);
    }
}
}
.rotateInDownLeft(){
    .keyframes(rotateInDownLeft);
    .-frames(@-...){
    0% {
        @{-}transform-origin: left bottom;
    @{-}transform: rotate3d(0, 0, 1, -45deg);
    .opacity(0);
    }

    100% {
        @{-}transform-origin: left bottom;
    @{-}transform: none;
    .opacity(100);
    }
}
}
.rotateInDownRight(){
    .keyframes(rotateInDownRight);
    .-frames(@-...){
    0% {
        @{-}transform-origin: right bottom;
    @{-}transform: rotate3d(0, 0, 1, 45deg);
    .opacity(0);
    }
    100% {
        @{-}transform-origin: right bottom;
    @{-}transform: none;
    .opacity(100);
    }
}
}
.rotateInUpLeft(){
    .keyframes(rotateInUpLeft);
    .-frames(@-...){
    0% {
        @{-}transform-origin: left bottom;
    @{-}transform: rotate3d(0, 0, 1, 45deg);
    .opacity(0);
    }

    100% {
        @{-}transform-origin: left bottom;
    @{-}transform: none;
    .opacity(100);
    }
}
}
.rotateInUpRight(){
    .keyframes(rotateInUpRight);
    .-frames(@-...){
    0% {
        @{-}transform-origin: right bottom;
    @{-}transform: rotate3d(0, 0, 1, -90deg);
    .opacity(0);
    }

    100% {
        @{-}transform-origin: right bottom;
    @{-}transform: none;
    .opacity(100);
    }
}
}
.rotateOut(){
    .keyframes(rotateOut);
    .-frames(@-...){
    0% {
        @{-}transform-origin: center;
    .opacity(100);
    }

    100% {
        @{-}transform-origin: center;
    @{-}transform: rotate3d(0, 0, 1, 200deg);
    .opacity(0);
    }
}
}

.rotateOutDownLeft(){
    .keyframes(rotateOutDownLeft);
    .-frames(@-...){
    0% {
        @{-}transform-origin: left bottom;
    .opacity(100);
    }

    100% {
        @{-}transform-origin: left bottom;
    @{-}transform: rotate3d(0, 0, 1, 45deg);
    .opacity(0);
    }
}
}
.rotateOutDownRight(){
    .keyframes(rotateOutDownRight);
    .-frames(@-...){
    0% {
        @{-}transform-origin: right bottom;
    .opacity(100);
    }

    100% {
        @{-}transform-origin: right bottom;
    @{-}transform: rotate3d(0, 0, 1, -45deg);
    .opacity(0);
    }
}
}
.rotateOutUpLeft(){
    .keyframes(rotateOutUpLeft);
    .-frames(@-...){
    0% {
        @{-}transform-origin: left bottom;
    .opacity(100);
    }

    100% {
        @{-}transform-origin: left bottom;
    @{-}transform: rotate3d(0, 0, 1, -45deg);
    .opacity(0);
    }
}
}
.rotateOutUpRight(){
    .keyframes(rotateOutUpRight);
    .-frames(@-...){
    0% {
        @{-}transform-origin: right bottom;
    .opacity(100);
    }

    100% {
        @{-}transform-origin: right bottom;
    @{-}transform: rotate3d(0, 0, 1, 90deg);
    .opacity(0);
    }
}
}

// Specials
.hingeLeft(){
    .keyframes(hingeLeft);
    .-frames(@-...){
    0% {
        @{-}transform-origin: top left;
    @{-}animation-timing-function: ease-in-out;
    }

    20%, 60% {
        @{-}transform: rotate3d(0, 0, 1, 80deg);
    @{-}transform-origin: top left;
    @{-}animation-timing-function: ease-in-out;
    }

    40%, 80% {
        @{-}transform: rotate3d(0, 0, 1, 60deg);
    @{-}transform-origin: top left;
    @{-}animation-timing-function: ease-in-out;
    .opacity(100);
    }

    100% {
        @{-}transform: translate3d(0, 700px, 0);
    .opacity(0);
    }
}
}
.hingeRight(){
    .keyframes(hingeRight);
    .-frames(@-...){
    0% {
        @{-}transform-origin: top right;
    @{-}animation-timing-function: ease-in-out;
    }

    20%, 60% {
        @{-}transform: rotate3d(0, 0, 1, -80deg);
    @{-}transform-origin: top right;
    @{-}animation-timing-function: ease-in-out;
    }

    40%, 80% {
        @{-}transform: rotate3d(0, 0, 1, -60deg);
    @{-}transform-origin: top right;
    @{-}animation-timing-function: ease-in-out;
    .opacity(100);
    }

    100% {
        @{-}transform: translate3d(0, 700px, 0);
    .opacity(0);
    }
}
}
.rollInLeft(){
    .keyframes(rollInLeft);
    .-frames(@-...){
    0% {
        .opacity(0);
        @{-}transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    }

    100% {
        .opacity(100);
        @{-}transform: none;
    }
}
}
.rollInRight(){
    .keyframes(rollInRight);
    .-frames(@-...){
    0% {
        .opacity(0);
        @{-}transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    }

    100% {
        .opacity(100);
        @{-}transform: none;
    }
}
}
.rollOutLeft(){
    .keyframes(rollOutLeft);
    .-frames(@-...){
    0% {
        .opacity(100);
    }

    100% {
        .opacity(0);
        @{-}transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    }
}
}
.rollOutRight(){
    .keyframes(rollOutRight);
    .-frames(@-...){
    0% {
        .opacity(100);
    }

    100% {
        .opacity(0);
        @{-}transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    }
}
}
.zoomIn(){
    .keyframes(zoomIn);
    .-frames(@-...){
    0% {
        .opacity(0);
        @{-}transform: scale3d(.3, .3, .3);
    }

    50% {
        .opacity(100);
    }
}
}
.zoomInDown(){
    .keyframes(zoomInDown);
    .-frames(@-...){
    0% {
        .opacity(0);
        @{-}transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    @{-}animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    60% {
        .opacity(100);
        @{-}transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    @{-}animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}
}
.zoomInLeft(){
    .keyframes(zoomInLeft);
    .-frames(@-...){
    0% {
        .opacity(0);
        @{-}transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    @{-}animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    60% {
        .opacity(100);
        @{-}transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    @{-}animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}
}
.zoomInRight(){
    .keyframes(zoomInRight);
    .-frames(@-...){
    0% {
        .opacity(0);
        @{-}transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    @{-}animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    60% {
        .opacity(100);
        @{-}transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    @{-}animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}
}
.zoomInUp(){
    .keyframes(zoomInUp);
    .-frames(@-...){
    0% {
        .opacity(0);
        @{-}transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    @{-}animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    60% {
        .opacity(100);
        @{-}transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    @{-}animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}
}
.zoomOut(){
    .keyframes(zoomOut);
    .-frames(@-...){
    0% {
        .opacity(100);
    }

    50% {
        .opacity(0);
        @{-}transform: scale3d(.3, .3, .3);
    }

    100% {
        .opacity(0);
    }
}
}
.zoomOutDown(){
    .keyframes(zoomOutDown);
    .-frames(@-...){
    40% {
        .opacity(100);
        @{-}transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    @{-}animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    100% {
        .opacity(0);
        @{-}transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    @{-}transform-origin: center bottom;
    @{-}animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}
}
.zoomOutLeft(){
    .keyframes(zoomOutLeft);
    .-frames(@-...){
    40% {
        .opacity(100);
        @{-}transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
    }

    100% {
        .opacity(0);
        @{-}transform: scale(.1) translate3d(-2000px, 0, 0);
    @{-}transform-origin: left center;
    }
}
}
.zoomOutRight(){
    .keyframes(zoomOutRight);
    .-frames(@-...){
    40% {
        .opacity(100);
        @{-}transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
    }

    100% {
        .opacity(0);
        @{-}transform: scale(.1) translate3d(2000px, 0, 0);
    @{-}transform-origin: right center;
    }
}
}
.zoomOutUp(){
    .keyframes(zoomOutUp);
    .-frames(@-...){
    40% {
        .opacity(100);
        @{-}transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    @{-}animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    100% {
        .opacity(0);
        @{-}transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    @{-}transform-origin: center bottom;
    @{-}animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}
}

// turnIn
.turnInDown(@p: 600px;@n:turnInDown){
    .keyframes(@n);
    .-frames(@-...){
    0% {
        @{-}transform:perspective(@p) rotateX(180deg);
    .opacity(0);
    @{-}transform-origin:50% 0;
    }
    100% {
        @{-}transform:perspective(@p) rotateX(0deg);
    .opacity(100);
    @{-}transform-origin:50% 0;
    }
}
}
.turnInUp(@p: 600px;@n:turnInUp){
    .keyframes(@n);
    .-frames(@-...){
    0% {
        @{-}transform:perspective(@p) rotateX(-180deg);
    .opacity(0);
    @{-}transform-origin:50% 100%;
    }
    100% {
        @{-}transform:perspective(@p) rotateX(0deg);
    .opacity(100);
    @{-}transform-origin:50% 100%;
    }
}
}
.turnInLeft(@p: 1300px;@n:turnInLeft){
    .keyframes(@n);
    .-frames(@-...){
    0% {
        @{-}transform:perspective(@p) rotateY(-180deg);
    .opacity(0);
    @{-}transform-origin:0 50%;
    }
    100% {
        @{-}transform:perspective(@p) rotateY(0deg);
    .opacity(100);
    @{-}transform-origin:0 50%;
    }
}
}
.turnInRight(@p: 1300px;@n:turnInRight){
    .keyframes(@n);
    .-frames(@-...){
    0% {
        @{-}transform:perspective(@p) rotateY(180deg);
    .opacity(0);
    @{-}transform-origin:100% 50%;
    }
    100% {
        @{-}transform:perspective(@p) rotateY(0deg);
    .opacity(100);
    @{-}transform-origin:100% 50%;
    }
}
}

.turnOutDown(@p: 600px;@n:turnOutDown){
    .keyframes(@n);
    .-frames(@-...){
    0% {
        @{-}transform:perspective(@p) rotateX(0deg);
    .opacity(100);
    @{-}transform-origin:50% 100%;
    }
    100% {
        @{-}transform:perspective(@p) rotateX(-180deg);
    .opacity(0);
    @{-}transform-origin:50% 100%;
    }
}
}
.turnOutUp(@p: 600px;@n:turnOutUp){
    .keyframes(@n);
    .-frames(@-...){
    0% {
        @{-}transform:perspective(@p) rotateX(0deg);
    .opacity(100);
    @{-}transform-origin:50% 0;
    }
    100% {
        @{-}transform:perspective(@p) rotateX(180deg);
    .opacity(0);
    @{-}transform-origin:50% 0;
    }
}
}
.turnOutLeft(@p: 1300px;@n:turnOutLeft){
    .keyframes(@n);
    .-frames(@-...){
    0% {
        @{-}transform:perspective(@p) rotateY(0deg);
    .opacity(100);
    @{-}transform-origin:0 50%;
    }
    100% {
        @{-}transform:perspective(@p) rotateY(-180deg);
    .opacity(0);
    @{-}transform-origin:0 50%;
    }
}
}
.turnOutRight(@p: 1300px;@n:turnOutRight){
    .keyframes(@n);
    .-frames(@-...){
    0% {
        @{-}transform:perspective(@p) rotateY(0deg);
    .opacity(100);
    @{-}transform-origin:100% 50%;
    }
    100% {
        @{-}transform:perspective(@p) rotateY(180deg);
    .opacity(0);
    @{-}transform-origin:100% 50%;
    }
}
}